/* eslint-disable */
/**
 * Created by GYL on 2018/8/24
 */
import React, { Component } from 'react';
import styles from '../EventPosting.less';
import { Divider, Collapse, Icon, Select, Input, notification, Form, Row, Col, TreeSelect, Tag, message, Spin, Timeline } from 'antd';
import Container from "../../../components/common/Container";
import PublicService from "../../../services/PublicService";
import config from '../../../config';
import Util from '../../../utils/Util';
import request from '../../../utils/request';
import MyTable from "../../../components/common/MyTable";
import MyModal from '../../../components/common/MyModal';
import JSGanttComponent from 'react-jsgantt';
import moment from 'moment';
import Edit_Appeal from './Edit_Appeal';
import Record_Compare from './Record_Compare';
class Record_GtteWrap extends Component {






  state = {
    spinning: false,
    crList: [],
    Record_Compare: false,
    changeId: ''
  }


  componentDidMount() {
    this.getChangeRecordByProjectId()
    // console.log(this.props)
  }

  //获取变更历史
  getChangeRecordByProjectId = () => {
    this.setState({
      spinning:true
    })
    let params = {
      projectId: this.props.id
    }
    request({
      url: '/pm-web/projectmanage/progress/getChangeRecordByProjectId',
      method: 'POST',
      data: params
    }).then(data => {
      if (data.rc === 0) {
        // console.log(data)
        this.setState({
          crList: data.ret.crList,
          spinning:false
        })


      }
    })
  }

  onCheck = (id) => {

    this.setState({

      changeId: id
    })

    setTimeout(() => {
      this.setState({
        Record_Compare: true,

      })
    }, 500)


  }

  onBack = () => {
    this.setState({
      Record_Compare: false
    })
  }


  render() {
    let t = this
    let width = document.body.clientWidth;
    const height = document.body.clientHeight;
    let containerHeight = '76vh';
    let tableHeight = 310;
    if (width > 1367) {
      tableHeight = 380;
      containerHeight = '83vh';
    }

    const { crList } = this.state
    return (
      <Spin tip="Loading..." spinning={this.state.spinning}>
        {
          //变更详情
          this.state.Record_Compare ? <Record_Compare id={this.props.id} changeId={this.state.changeId} onBack={this.onBack} /> :
            //变更记录

            <div style={{ margin: 10, marginBottom: 0, marginTop: 0, height: '86vh', backgroundColor: '#F6FCFC', boxShadow: "0px 0px 4px 0px rgba(223,223,223,1)", borderRadius: 3 }}>
              {/* <div style={{ height: '30px', backgroundColor: '#D6EDEB', display: 'flex', alignItems: 'center', flexDirection: 'row', borderRadius: 3, border: '2px solid #fff', paddingLeft: 15 }}>变更记录</div> */}
              <div className={styles.warpBox} style={{ height: '76vh', backgroundColor: '#F6FCFC', overflow: 'auto' }}>

                <div style={{ flex: 1, backgroundColor: '#f6f6f18a', overflow: 'auto', display: 'flex', padding: 15, paddingLeft: '15vh', paddingRight: '15vh' }}>

                  <Timeline style={{ width: '100%' }}>
                    {
                      crList.map((item, index) => {
                        return (
                          <Timeline.Item key={index}>
                            <div style={{ width: '100%', height: '20vh', overflow: 'auto', backgroundColor: '#e3e9ef', padding: 10 }}>

                              <p>变更时间 :
                                <span style={{ marginLeft: 10 }}>{item.changeTime && moment(item.changeTime).format("YYYY-MM-DD HH:mm:ss")}</span>
                                <span style={{ float: 'right' }}><Tag color="#87d068" onClick={this.onCheck.bind(this, item.changeId)}>详情</Tag></span>
                              </p>

                              <div>变更内容 :
                                  {
                                  item.coList &&
                                  item.coList.map((item) => {
                                    return (
                                      <Tag color={item.operationType == 1 ? "green" : item.operationType == 2 ? "purple" : 'red'} style={{ marginLeft: 10 }}>
                                        {item.operationType == 1 ? "新增" : item.operationType == 2 ? "修改" : '删除'}{item.eventName}
                                      </Tag>
                                    )
                                  })
                                }

                              </div>

                            </div>

                          </Timeline.Item>
                        )
                      })
                    }

                  </Timeline>
                </div>
              </div>

            </div>
        }

      </Spin>
    );


  }

}
export default Record_GtteWrap;

